SELFHTML/Quickbar  CSS Style-Sheets  Style-Sheet-Angaben


Style-Sheet-Angaben: Listen und Tabellen

Diese Seite ist ein Dokument mit Informationstext

 Allgemeines zu Listen
 Darstellungstyp (list-style-type)
 Listeneinrückung (list-style-position)
 Eigene Bullet-Grafik (list-style-image)
 Listendarstellung (allgemein) (list-style)
 Tabellenzelle über mehrere Spalten erstrecken (column-span)
 Tabellenzelle über mehrere Zeilen erstrecken (row-span)
 Position einer Tabellenüberschrift (caption-side)
 Sprachausgabe von Tabellen (speak-header-cell)

 

Allgemeines zu Listen und Tabellen

Die Style-Sheet-Angaben für Listen beziehen sich speziell auf die HTML-Tags <ul> ( Aufzählungslisten) und <ol> ( numerierte Listen).

Sie können mit Hilfe von Style-Sheet-Angaben die gleichen Formatierungen erzwingen, wie es in den HTML-Tags <ul> und <ol> auch mit Hilfe von zusΣtzlichen Attributen möglich ist. Von Vorteil gegenüber der Direktangabe im HTML-Tag sind solche Style-Sheet-Angaben vor allem dann, wenn Sie sie in einer separaten Datei notieren, die Sie dann in beliebigen HTML-Dateien einbinden können (siehe auch:  Style-Sheets in separater Datei definieren). Darüber hinaus stehen einige erweiterte Möglichkeiten zum Formatieren von Listen zur Verfügung, etwa die Möglichkeit, Listen aus- statt einzurücken oder eine eigene Grafik als Aufzählungssymbol zu definieren.

Die Style-Sheet-Angaben zu Tabellen beziehen sich auf Tabellenmerkmale, die sich nicht durch andere Style-Sheet-Angaben, etwa solchen zu  Rahmen und Innenabständen, beschreiben lassen.

 

CSS1.0MS IE3.0Netscape 4.0 Darstellungstyp (list-style-type)

Beispiel Anzeigebeispiel: So sieht's aus

Für Auzählungslisten können Sie das Erscheinungsbild des Bullet-Zeichens bestimmen. Für numerierte Liste können Sie die Darstellung der Durchnumerierung beeinflussen.

Beispiel (Style-Sheet-Definition im Dateikopf):

<style type="text/css">
  ul.rund { ul list-style-type:circle }
  ul.eckig { ul list-style-type:square }
  ol.numerisch { ol list-style-type:decimal }
  ol.alphabetisch { ol list-style-type:lower-alpha }
</style>

Erläuterung:

Mit list-style-type: können Sie das Aussehen von Listenzeichen kontrollieren. Erlaubt ist eine der folgenden Angaben.

decimal = für <ol>-Listen: Numerierung 1.,2.,3.,4. usw.
lower-roman = für <ol>-Listen: Numerierung i.,ii.,iii.,iv. usw.
upper-roman = für <ol>-Listen: Numerierung I.,II.,III.,IV. usw.
lower-alpha = für <ol>-Listen: Numerierung a.,b.,c.,d. usw.
upper-alpha = für <ol>-Listen: Numerierung A.,B.,C.,D. usw.
disc = für <ul>-Listen: Dateisymbol als Bulletzeichen
circle = für <ul>-Listen: rundes Bulletzeichen
square = für <ul>-Listen: rechteckiges Bulletzeichen
none = kein Bulletzeichen, keine Numerierung

 

CSS1.0MS IE3.0 Listeneinrückung (list-style-position)

Beispiel Anzeigebeispiel: So sieht's aus

Sie können bestimmen, wie sich Bulletzeichen oder Numerierung mit dem Inhalt eines Listenpunktes in Bezug auf Einrückung verhalten.

Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

<ul style="list-style-position:inside">
<li>Text
<li>Text
</ul>Text

Erläuterung:

Mit list-style-position: können Sie das Einrückungsverhalten kontrollieren. Erlaubt ist eine der folgenden Angaben.

inside = eingerückt.
outside = ausgerückt (Voreinstellung).

Beachten Sie:

Netscape 4.0 interpretiert diese Angabe nicht.

 

CSS1.0MS IE3.0 Eigene Bullet-Grafik (list-style-image)

Beispiel Anzeigebeispiel: So sieht's aus

Sie können eine eigene geeignete Grafik als Bullet-Zeichen für Aufzählungslisten bestimmen.

Beispiel (Style-Sheet-Definition im Dateikopf):

<style type="text/css">
  ul { list-style-image:url(point.gif) }
</style>

Erläuterung:

Mit list-style-image:url([Dateiname]) können Sie eine Grafik für das eigene Bulletzeichen angeben. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF- oder JPG-Grafiken benutzen.

Im Beispiel wird vorausgesetzt, daß sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim  Einbinden von Grafiken in HTML.

Beachten Sie:

Netscape 4.0 interpretiert diese Angabe nicht.

 

CSS1.0MS IE3.0Netscape 4.0 Listendarstellung (allgemein) (list-style)

Beispiel Anzeigebeispiel: So sieht's aus

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
 Darstellungstyp (list-style-type)
 Listeneinrückung (list-style-position)
 Eigene Bullet-Grafik (list-style-image)

Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

<ol style="list-style:upper-roman outside;">
<li>Text
<li>Text
</ol>

Erläuterung:

Mit list-style: können Sie zusammenfassende Angaben zum Aussehen von Aufzählungslisten oder numerierten Listen machen. Notieren Sie Angaben zum Darstellungstyp, zur Listeneinrückung sowie zur Bullet-Grafik mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.

Beachten Sie:

Netscape 4.0 interpretiert nur einen Teil dieser Angaben.

 

CSS2.0 Tabellenzelle über mehrere Spalten erstrecken (column-span)

Beispiel Anzeigebeispiel: So sieht's aus

Sie können für Kopf- oder Datenzellen von Tabellen erzwingen, daß diese sich über mehrere Spalten erstrecken. Die Style-Sheet-Angabe hat den gleichen Effekt wie das  spaltenweise Verbinden von Zellen in HTML. Im Unterschied dazu können Sie jedoch globale Angaben zu Unterklassen von Tabellenzellen machen.

Beispiel (Style-Sheet-Definition im Dateikopf):

<style type="text/css">
  td.zweispaltig { column-span:2 }
  td.dreispaltig { column-span:3 }
</style>

Erläuterung:

Mit column-span: können Sie angeben, über wie viele Spalten sich eine Tabellenzelle (<td>- oder <th>-Tag) erstrecken soll.

 

CSS2.0 Tabellenzelle über mehrere Zeilen erstrecken (row-span)

Beispiel Anzeigebeispiel: So sieht's aus

Sie können für Kopf- oder Datenzellen von Tabellen erzwingen, daß diese sich über mehrere Zeilen erstrecken. Die Style-Sheet-Angabe hat den gleichen Effekt wie das  zeilenweise Verbinden von Zellen in HTML. Im Unterschied dazu können Sie jedoch globale Angaben zu Unterklassen von Tabellenzellen machen.

Beispiel (Style-Sheet-Definition im Dateikopf):

<style type="text/css">
  td.zweizeilig { row-span:2 }
</style>

Erläuterung:

Mit row-span: können Sie angeben, über wie viele Zeilen sich eine Tabellenzelle (<td>- oder <th>-Tag) erstrecken soll.

 

CSS2.0 Position einer Tabellenüberschrift (caption-side)

Beispiel Anzeigebeispiel: So sieht's aus

Sie können für Tabellen eine Tabellenüberschrift oder Tabellenunterschrift definieren. Mit der hier beschriebenen Style-Sheet-Angabe können Sie die Position der Über- bzw. Unterschrift festlegen. Die Style-Sheet-Angabe hat den gleichen Effekt wie eine  Tabellenüberschrift / Tabellenunterschrift in HTML.

Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

<table border">
 <caption style="caption-side:top">Tabellen&uuml;berschrift</caption>
 <!-- Tabelleninhalt -->
</table>

Erläuterung:

Mit caption-side: können Sie die Position der Tabellenüberschrift bestimmen. Die Angabe ist für das HTML-Tag <caption>...</caption> gedacht. Folgende Angaben sind erlaubt:

top = oberhalb der Tabelle zentriert (Tabellenüberschrift).
topleft = oberhalb der Tabelle linksbündig (Tabellenüberschrift).
topright = oberhalb der Tabelle rechtsbündig (Tabellenüberschrift).
bottom = unterhalb der Tabelle zentriert (Tabellenunterschrift).
bottomleft = unterhalb der Tabelle linksbündig (Tabellenunterschrift).
bottomright = unterhalb der Tabelle rechtsbündig (Tabellenunterschrift).

 

CSS2.0 Sprachausgabe von Tabellen (speak-header-cell)

Beispiel "Anzeigebeispiel": So hört sich's an

Wenn eine HTML-Tabelle nicht am Bildschirm angezeigt oder ausgedruckt wird, sondern von einem Sprecher oder Sprachausgabesystem vorgelesen wird (z.B. für Sehbehinderte), entsteht das Problem, daß ein zweidimensionaler Raum eindimensional in der Zeit gelesen werden soll. Mit der hier beschriebenen Angabe können Sie für diesen Fall entscheiden, ob der Inhalt von Kopfzellen bei jeder ihr untergeordneten Datenzelle erneut wiedergegeben werden soll, oder ob der Kopfzelleninhalt nur einmal wiedergegeben werden soll.

Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

<table border">
 <tr>
  <th style="speak-header-cell:always">Kopfzelle 1</th>
  <th style="speak-header-cell:once">Kopfzelle 2</th>
 </tr>
 <tr>
  <td>Datenzelle 1</td>
  <td>Datenzelle 2</td>
 </tr>
 <tr>
  <td>Datenzelle 3</td>
  <td>Datenzelle 4</td>
 </tr>
</table>

Erläuterung:

Mit speak-header-cell: können Sie das Wiedergabeverhalten für Kopfzelleninhalte bestimmen. In der CSS 2.0 Spezifikation ist noch nicht klar, ob die Angabe für Kopfzellen-Tags <th> oder für die zugehörigen Datenzellen-Tags <td> gedacht ist. Das obige Beispiel nimmt an, daß die Angabe im Kopfzellen-Tag steht. Das Beispiel bewirkt, daß die Kopfzelle 1 vor den Datenzellen 1 und 3 jeweils wiederholt wird, während die Kopfzelle 2 nur einmal ausgegeben wird. Folgende Angaben sind erlaubt:

always = Kopfzelleninhalt bei jeder untergeordneten Datenzelle wiederholen.
once = Kopfzelleninhalt nur einmal wiedergeben (Normaleinstellung).

weiter: Style-Sheet-Angaben: Pseudo-Formate
zurück: Style-Sheet-Angaben: Hintergrundfarben und -bilder
 

SELFHTML/Quickbar  CSS Style-Sheets  Style-Sheet-Angaben

© 1998  Stefan Münz, muenz@csi.com